<template>
  <div class="form-currency-search">
    <!-- 金额范围 -->
    <div class="currency-number currency-number-range">
      <el-input v-model="numberMin" type="number" @change="changeNumberRange"></el-input>
      <span>~</span>
      <el-input v-model="numberMax" type="number" @change="changeNumberRange"></el-input>
    </div>

    <!-- 货币 -->
    <el-select v-model="currentCurrency" @change="selectChange" multiple collapse-tags>
      <el-option
        v-for="item in currentOptions"
        :key="item.value"
        :label="item.value"
        :value="item.value">
      </el-option>
    </el-select>
  </div>
</template>

<script>
import FormMixin from '@src/component/form/mixin/form';
import { currencyOption } from '@src/util/currency';

export default {
  name: 'form-currency-search',
  mixins: [FormMixin],
  props: {
    value: {
      type: Object,
      default: () => {
        return {
          number: [],
          currency: []
        };
      }
    }
  },
  data() {
    return {
      numberMin: '',
      numberMax: '',
      currentCurrency: '',
      currentOptions: currencyOption || []
    };
  },
  watch: {
    value(val) {
      this.numberMin = val?.number[0] || '';
      this.numberMax = val?.number[1] || '';
      this.currentCurrency = val?.currency || [];
    }
  },
  methods: {
    update(newValue) {
      this.$emit('update', { newValue, field: this.field });
      this.$emit('input', newValue);
    },
    
    changeNumberRange(value) {
      this.update({ number: [this.numberMin, this.numberMax], currency: this.value.currency});
    },

    selectChange(currency) {
      this.update({ number: this.value.number, currency});
    }
  }
};
</script>

<style lang="scss">
.form-currency-search {
  display: flex;
  width: 100%;

  .currency-number-range {
    display: flex;
    align-items: center;
    span {
      margin: 0 4px;
    }
  }

  .el-select {
    margin-left: 4px;
    // width: 50%;
  }

  .el-select__tags {
    max-width: inherit !important;
  }
}
</style>
